@using VotingSystem.ViewModels
@model SurveyListViewModel

@{
    ViewData["Title"] = "我创建的问卷";
}

<div class="container-fluid py-4">
    @if (TempData["SuccessMessage"] != null)
    {
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>@TempData["SuccessMessage"]
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    }
    @if (TempData["ErrorMessage"] != null)
    {
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>@TempData["ErrorMessage"]
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    }
    <div class="row mb-4">
        <div class="col-md-8">
            <h2 class="mb-0">
                <i class="fas fa-clipboard-list text-primary me-2"></i>我创建的问卷
            </h2>
            <p class="text-muted mt-2">管理您创建的所有问卷</p>
        </div>
        <div class="col-md-4 text-end">
            <a asp-action="Create" class="btn btn-primary">
                <i class="fas fa-plus-circle me-2"></i>创建问卷
            </a>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-text bg-white border-end-0">
                    <i class="fas fa-search text-muted"></i>
                </span>
                <input type="text" class="form-control border-start-0" placeholder="搜索我的问卷..." id="searchInput">
                <button class="btn btn-outline-primary" type="button" id="searchButton">
                    搜索
                </button>
            </div>
        </div>
        <div class="col-md-6">
            <div class="btn-group float-end" role="group">
                <a href="@Url.Action("MySurveys", new { filter = "all" })" class="btn btn-outline-primary @(ViewBag.CurrentFilter == "all" ? "active" : "")">
                    <i class="fas fa-list me-1"></i>全部
                </a>
                <a href="@Url.Action("MySurveys", new { filter = "active" })" class="btn btn-outline-primary @(ViewBag.CurrentFilter == "active" ? "active" : "")">
                    <i class="fas fa-play-circle me-1"></i>进行中
                </a>
                <a href="@Url.Action("MySurveys", new { filter = "ended" })" class="btn btn-outline-primary @(ViewBag.CurrentFilter == "ended" ? "active" : "")">
                    <i class="fas fa-stop-circle me-1"></i>已结束
                </a>
                <a href="@Url.Action("Index")" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left me-1"></i>返回列表
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        @foreach (var survey in Model.Surveys)
        {
            <div class="col-12 mb-4 fade-in survey-item">
                <div class="card survey-card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <h4 class="card-title mb-0">@survey.Title</h4>
                                    <span class="badge bg-@(survey.IsActive ? "success" : "secondary")">
                                        @(survey.IsActive ? "进行中" : "已结束")
                                    </span>
                                </div>
                                <p class="card-text text-muted mb-3">@survey.Description</p>
                                <div class="d-flex gap-4 text-muted mb-3">
                                    <small><i class="fas fa-clock me-1"></i>创建时间：@survey.CreatedAt.ToString("yyyy-MM-dd HH:mm")</small>
                                    <small><i class="fas fa-users me-1"></i>参与人数：@survey.TotalResponses</small>
                                    <small><i class="fas fa-user-secret me-1"></i>@(survey.IsPublic ? "公开" : "私密")</small>
                                    <small><i class="fas fa-user me-1"></i>@(survey.IsAnonymous ? "匿名" : "实名")</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex flex-column gap-2 h-100 justify-content-center">
                                    <div class="btn-group w-100">
                                        <a asp-action="Edit" asp-route-id="@survey.Id" class="btn btn-warning">
                                            <i class="fas fa-edit me-1"></i>编辑
                                        </a>
                                        @if (survey.IsActive)
                                        {
                                            <form asp-action="Close" asp-route-id="@survey.Id" method="post" class="d-inline flex-grow-1">
                                                <button type="submit" class="btn btn-secondary w-100" onclick="return confirm('确定要结束这个问卷吗？')">
                                                    <i class="fas fa-stop-circle me-1"></i>结束
                                                </button>
                                            </form>
                                        }
                                    </div>
                                    <div class="btn-group w-100">
                                        <a asp-action="Details" asp-route-id="@survey.Id" class="btn btn-outline-primary">
                                            <i class="fas fa-info-circle me-1"></i>详情
                                        </a>
                                        <button type="button" class="btn btn-outline-secondary share-btn" data-id="@survey.Id" data-title="@survey.Title" data-token="@survey.AccessToken">
                                            <i class="fas fa-share-alt me-1"></i>分享
                                        </button>
                                        <form asp-action="Delete" asp-route-id="@survey.Id" method="post" class="d-inline flex-grow-1">
                                            <button type="submit" class="btn btn-danger w-100" onclick="return confirm('确定要删除这个问卷吗？')">
                                                <i class="fas fa-trash-alt me-1"></i>删除
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

    @if (!Model.Surveys.Any())
    {
        <div class="text-center py-5">
            <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">暂无创建的问卷</h4>
            <p class="text-muted">快来创建您的第一个问卷吧！</p>
            <a asp-action="Create" class="btn btn-primary mt-3">
                <i class="fas fa-plus-circle me-2"></i>创建问卷
            </a>
        </div>
    }
</div>

<!-- 分享模态框 -->
<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="shareModalLabel">分享问卷</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="shareUrl" class="form-label">分享链接</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="shareUrl" readonly>
                        <button class="btn btn-outline-secondary" type="button" id="copyBtn">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Styles {
    <style>
        .survey-card {
            transition: transform 0.2s;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .survey-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .btn-group .btn {
            border-radius: 0;
            padding: .5rem 1rem;
        }
        .btn-group .btn:first-child {
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
        }
        .btn-group .btn:last-child {
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }
        .input-group-text {
            border-radius: 0.25rem 0 0 0.25rem;
        }
        .form-control {
            border-radius: 0 0.25rem 0.25rem 0;
        }
        .alert {
            border-radius: 10px;
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
        }
    </style>
}

@section Scripts {
    <script>
        // 添加淡入动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.survey-card');
            cards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.1}s`;
            });
        });

        $(document).ready(function() {
            // 搜索功能
            $('#searchButton').click(function() {
                var searchText = $('#searchInput').val().toLowerCase();
                $('.survey-item').each(function() {
                    var title = $(this).find('.card-title').text().toLowerCase();
                    var description = $(this).find('.card-text').text().toLowerCase();
                    var metadata = $(this).find('.text-muted').text().toLowerCase();
                    if (title.includes(searchText) || description.includes(searchText) || metadata.includes(searchText)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });

            // 回车键触发搜索
            $('#searchInput').keypress(function(e) {
                if(e.which == 13) {
                    $('#searchButton').click();
                }
            });

            // 自动隐藏提示消息
            $('.alert').delay(4000).fadeOut(500);

            // 分享按钮点击事件
            $('.share-btn').click(function() {
                var id = $(this).data('id');
                var title = $(this).data('title');
                var token = $(this).data('token');
                var shareUrl = window.location.origin + '/Surveys/Details/' + id + '?token=' + token;
                
                $('#shareUrl').val(shareUrl);
                $('#shareModal').modal('show');
            });

            // 复制链接按钮点击事件
            $('#copyBtn').click(function() {
                var shareUrl = $('#shareUrl');
                shareUrl.select();
                document.execCommand('copy');
                
                // 显示复制成功提示
                var btn = $(this);
                var originalText = btn.html();
                btn.html('<i class="fas fa-check"></i>');
                setTimeout(function() {
                    btn.html(originalText);
                }, 2000);
            });
        });
    </script>
} 